<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./ThreeJs/WebGL.js"></script>
  <script src="./ThreeJs/js/three.js"></script>
  <script>
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
    camera.position.set(0, 0, 100);
    camera.lookAt(0, 0, 0);
    var scene = new THREE.Scene();

    // 创造字体
    var loader = new THREE.FontLoader();
    loader.load('./ThreeJs/font/optimer_bold.typeface.json', function (font) {
      var geometry = new THREE.TextGeometry('Hello three.js!', {
        font: font,
        size: 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
      });

      scene.add(geometry);
      renderer.render(scene, camera);
    });
  </script>
</body>

</html>